<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="工号">
        <el-input v-model="searchForm.jobNumber" placeholder="工号"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model="searchForm.department" placeholder="部门"></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="searchForm.role" placeholder="角色">
          <el-option label="管理员" value="管理员"></el-option>
          <el-option label="操作员" value="操作员"></el-option>
          <el-option label="工艺员" value="工艺员"></el-option>
          <el-option label="工艺巡检员" value="工艺巡检员"></el-option>
          <el-option label="设备管理员" value="设备管理员"></el-option>
          <el-option label="设备巡检员" value="设备巡检员"></el-option>
          <el-option label="设备维修员" value="设备维修员"></el-option>
          <el-option label="质检员" value="质检员"></el-option>
          <el-option label="中控管理员" value="中控管理员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      :height="tableHeight"
      border
      style="width: 100%">
      <el-table-column
        prop="jobNumber"
        label="工号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="department"
        label="部门">
      </el-table-column>
      <el-table-column
        prop="role"
        label="角色">
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="text"
            size="small"
          >
            编辑
          </el-button>
          <el-button
            @click="deleteUserClick(scope.row)"
            type="text"
            size="small"
            style="color: red"
          >
            删除
          </el-button>
          <el-button
            @click="changePasswordClick(scope.row)"
            type="text"
            size="small"
            style="color: red"
          >
            重置密码
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑" :visible.sync="editDialogVisible">
      <el-form :model="editForm"
               ref="editForm"
               label-width="100px"
               style="width: 800px"
               class="editForm">
        <el-form-item label="工号" prop="jobNumber">
          <el-input v-model="editForm.jobNumber" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input v-model="editForm.department"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="editForm.role" placeholder="请选择角色" style="width: 700px">
            <el-option label="管理员" value="管理员"></el-option>
            <el-option label="操作员" value="操作员"></el-option>
            <el-option label="工艺员" value="工艺员"></el-option>
            <el-option label="工艺巡检员" value="工艺巡检员"></el-option>
            <el-option label="设备管理员" value="设备管理员"></el-option>
            <el-option label="设备巡检员" value="设备巡检员"></el-option>
            <el-option label="设备维修员" value="设备维修员"></el-option>
            <el-option label="质检员" value="质检员"></el-option>
            <el-option label="中控管理员" value="中控管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogCancel('editForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="editDialogConfirm('editForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="收货地址" :visible.sync="passwordDialogVisible">
      <el-form :model="passwordForm"
               status-icon :rules="rules"
               ref="passwordForm"
               label-width="100px"
               class="demo-passwordForm">
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="passwordForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="passwordForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passwordDialogCancel('passwordForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="changePassword('passwordForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script itemscope>
export default {
  name: 'Users',
  created() {
    this.resize();
  },
  mounted() {
    window.addEventListener('resize', this.resize);
  },
  computed: {},
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passwordForm.checkPass !== '') {
          this.$refs.passwordForm.validateField('checkPass');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      tableData: [],
      searchForm: {},
      editForm: {},
      passwordForm: {},
      tableHeight: null,
      editDialogVisible: false,
      passwordDialogVisible: false,
      formLabelWidth: '120px',
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' },
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
        ],
      },
      jobNumber: '',
    };
  },
  methods: {
    search() {
      const { axios, searchForm } = this;
      const userItem = [];
      const getParams = {
        job_number: searchForm.jobNumber,
        name: searchForm.name,
        department: searchForm.department,
        role: searchForm.role,
      };
      axios({
        method: 'get',
        url: '/home/employee/',
        timeout: 600000,
        params: getParams,
      })
        .then((response) => {
          // eslint-disable-next-line no-restricted-syntax
          for (const item of response.data) {
            const i = {
              jobNumber: null,
              name: '',
              department: '',
              role: '',
              phone: '',
            };
            i.jobNumber = item.job_number;
            i.name = item.name;
            i.phone = item.phone;
            i.department = item.department;
            i.role = item.role;
            userItem.push(i);
          }
        });
      this.tableData = userItem;
      console.log(this.tableData);
    },
    resize() {
      this.tableHeight = window.innerHeight - 220;
    },
    deleteUserClick(row) {
      console.log(row);
      const { axios } = this;
      const postData = row;
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        axios({
          method: 'post',
          url: '/home/user/delete_user/',
          timeout: 600000,
          data: postData,
        })
          .then(() => {
            this.$message({
              message: '删除成功！',
              type: 'success',
            });
            this.editDialogVisible = false;
            this.search();
          })
          .catch((error) => {
            console.log(error.response.data);
            this.$message.error('删除失败');
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    edit(row) {
      this.editDialogVisible = true;
      this.editForm = {
        jobNumber: row.jobNumber,
        name: row.name,
        department: row.department,
        role: row.role,
      };
    },
    editDialogCancel(formName) {
      this.editDialogVisible = false;
      this.$refs[formName].resetFields();
    },
    editDialogConfirm() {
      const { editForm, axios } = this;
      const postData = {};
      postData.jobNumber = editForm.jobNumber;
      postData.department = editForm.department;
      postData.role = editForm.role;
      axios({
        method: 'post',
        url: '/home/user/edit_user/',
        timeout: 600000,
        data: postData,
      })
        .then(() => {
          this.$message({
            message: '编辑成功！',
            type: 'success',
          });
          this.editDialogVisible = false;
          this.search();
        })
        .catch((error) => {
          console.log(error.response.data);
          this.$message.error('添加失败');
        });
    },
    deleteNode(node, data) {
      console.log(node);
      console.log(data);
      const { axios } = this;
      axios({
        method: 'delete',
        url: '/bom/bom/',
        timeout: 10000,
        params: { serial: data.data.serial },
      })
        .then(() => {
          this.loadBom();
          this.$message({
            message: '删除成功！',
            type: 'success',
          });
        })
        .catch((error) => {
          console.log(error.response.data);
          this.$message.error('删除失败');
        });
    },
    changePasswordClick(row) {
      console.log(row);
      this.jobNumber = row.jobNumber;
      this.passwordDialogVisible = true;
    },
    changePassword(form) {
      console.log(form);
      const { axios } = this;
      const postData = {};
      postData.password = this.passwordForm.checkPass;
      postData.jobNumber = this.jobNumber;
      axios({
        method: 'post',
        url: '/home/user/change_password/',
        timeout: 600000,
        data: postData,
      })
        .then(() => {
          this.$message({
            message: '重置密码成功！',
            type: 'success',
          });
          this.passwordDialogVisible = false;
          this.search();
        })
        .catch((error) => {
          console.log(error.response.data);
          this.$message.error('重置密码失败');
        });
    },
    passwordDialogCancel(formName) {
      this.passwordDialogVisible = false;
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
.el-header {
  background-color: #409EFF;
  color: #FFFFFF;
  line-height: 60px;
  font-size: x-large;
  -webkit-user-select: none;
}

#menu {
  text-align: center;
  margin-top: -2px;
  position: fixed;
  right: 20px;
}

.import {
  text-align: center;
  margin-top: -2px;
}

.el-aside {

}

.el-main {
  padding-bottom: 60px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: aliceblue;
  color: #333;
  text-align: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #FFFFFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.softwareCard {
  margin-top: 4px;
  text-align: center;
}
</style>
